<!--
 * @Description: 
 * @Date: 2023-04-03 19:26:48
 * @LastEditTime: 2023-04-10 15:54:12
 * @Author: Black
 * @FilePath: \store_admin\src\components\UploadFile.vue
-->
<template>
  <el-upload drag :action="uploadImageAction" 
    multiple :headers="{ token }" 
    :data="data" name="img"
    :on-success="uploadSuccess"
    :on-error="uploadError">
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      拖拽文件上传 或者 <em>点击打开文件夹上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        图片(jpg/png)大小不超过 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import { uploadImageAction } from '~/api/image';
import { getToken } from '~/composables/auth.js';
import { toast } from '~/composables/util';

const token = getToken()

defineProps({
  data: Object,
})

const emit = defineEmits(["success"])

const uploadSuccess = (response, uploadFile, uploadFiles) => {
  // console.log(response);
  emit("success", {
    response, uploadFile, uploadFiles
  })
  toast("图片上传成功")
}

const uploadError = (error, uploadFile, uploadFiles) => {
  let msg = JSON.parse(error.message).msg || "上传失败"
  toast(msg, "error")
}
</script>

<style scoped></style>